<template>
  <div class="tab-content doff-prediction">
    <BasicCard style="margin-bottom: 20px">
      <!-- <BasicTitle title="落纱预测报表"></BasicTitle> -->
      <BasicVxeTable ref="gridRef" v-bind="gridOption">
        <template #state="{ row }">
          <el-tag effect="dark" :color="zhuanTai.color(Number(row.machineDisplayState))">
            {{ zhuanTai.text(Number(row.machineDisplayState), '细纱') }}
          </el-tag>
        </template>
      </BasicVxeTable>
    </BasicCard>
  </div>
</template>
<script setup lang="ts">
  import { DoffPredictionRowVO } from '../../types'
  import { DoffPredictionTableColumns } from '../../data'
  import { getLuoShaYuCeList } from '@/api/shengChanJianShi'
  import dayjs from 'dayjs'
  import { zhuanTai } from '@/utils/custom/index'
  import { useUserStore } from '@/store/modules/user'

  const { t } = useI18n()
  const gridRef = ref<GlobalComponentInstance<'BasicVxeTable'>>()
  const userStore = useUserStore()
  const processId = userStore.getSycConstant('xiShaID')

  // 落纱预测报表
  const gridOption = reactive<BasicGridProps>({
    extraConfig: {
      title: t('custom.落纱预测报表'),
      isCustom: false,
      isExport: true,
      isFilterAndSort: true
    }, // 拓展的配置
    id: `doff-prediction-table`, // id用于缓存,务必配置
    toolbarConfig: {}, // 工具栏
    exportConfig: {
      filename: '数据表'
    },
    // height: '100%',
    proxyConfig: {
      autoLoad: false,
      // showLoading: false, // 关闭加载中
      ajax: {
        query: () => {
          // 默认接收 Promise<any[]>
          return getDoffReportList()
        }
      }
    },
    columns: DoffPredictionTableColumns
  })

  const getDoffReportList = () => {
    return new Promise<DoffPredictionRowVO[]>((resolve) => {
      getLuoShaYuCeList({
        craftNodeId: processId
      }).then((res: any) => {
        resolve(
          res
            .sort((a, b) => {
              return a.remainLength - b.remainLength
            })
            .map((item) => {
              return {
                processName: item.processName == null ? '/' : item.processName,
                machineDisplayState:
                  item.machineDisplayState == null ? '/' : item.machineDisplayState,
                machineName: item.machineName == null ? '/' : item.machineName,
                machineNo: item.machineNo == null ? '/' : item.machineNo,
                currentLength: item.currentLength == null ? '/' : item.currentLength,
                fixLength: item.fixLength == null ? '/' : item.fixLength,
                speed2: item.speed2 == null ? '/' : item.speed2,
                remainLength: item.remainLength == null ? '/' : item.remainLength,
                estimatedDoffingTime:
                  item.estimatedDoffingTime == null
                    ? '/'
                    : dayjs(item.estimatedDoffingTime).format('YYYY-MM-DD HH:mm'),
                employeeName: item.employeeName == null ? '/' : item.employeeName
              }
            })
        )
      })
    })
  }

  onMounted(() => {
    gridRef.value?.$grid?.commitProxy('query')
  })
</script>
<style scoped lang="scss"></style>
